<template>
  <div>
    <el-upload
      :data="{ directory: '/' }"
      :action="setting.uploadUrl"
      list-type="picture-card"
      multiple
      :on-success="handleSuccess"
      :on-preview="handlePreview"
      :file-list="modelValue"
      :on-remove="handleRemove"
      :limit="3"
      accept="video/*"
    >
      <el-icon><Plus /></el-icon>
    </el-upload>
    <el-dialog v-model="isShow" width="640">
      <div class="flex justify-center items-center">
        <vue3VideoPlay v-bind="options" />
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { Plus } from "@element-plus/icons-vue";
import { ref, reactive } from "vue";
import setting from "@/settings.js";
const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: {
    type: Array,
    default: [],
  },
  videoImg: {
    type: String,
    default: null,
  },
});
const isShow = ref(false);
const options = reactive({
  width: "600px", //播放器高度
  height: "450px", //播放器高度
  color: "#409eff", //主题色
  title: "", //视频名称
  src: "", //视频源
  muted: false, //静音
  webFullScreen: false,
  speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
  autoPlay: false, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  ligthOff: false, //关灯模式
  volume: 0.3, //默认音量大小
  control: true, //是否显示控制
  controlBtns: [
    "audioTrack",
    "quality",
    "speedRate",
    "volume",
    "setting",
    "pip",
    "pageFullScreen",
    "fullScreen",
  ], //显示所有按钮,
});
const handleRemove = (file, fileList) => {
  emit("update:modelValue", fileList);
};
const handlePreview = (file, aaa) => {
  options.src = file.path;
  isShow.value = true;
};
const handleSuccess = (res, file, fileList) => {
  let pfileList = [...props.modelValue];
  if (fileList.every((item) => item.status == "success")) {
    fileList.map((item) => {
      item.response &&
        pfileList.push({
          url: props.videoImg,
          path: item.response.data.urlFull,
        });
    });
    emit("update:modelValue", pfileList);
  }
};
</script>
